import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {//组件共享的data属性，放在这里
    num:100,
    products:[],
    msg:"黄河之水天上来"
  },
  getters: {//数据预处理，相当于Vue的computed
    // 函数，函数名就是属性，接收state作为第一个参数
    // 根据外界依赖值，数据变更发生变更
    reverseMsg(state){
      // state.msg="挑战严格模式"
      return state.msg.split('').reverse().join("");
    }
  },
  mutations: {//修改state的唯一方式
    // 只可以进行同步操作，原因是操作异步调试工具可能检测不到
    // 由一个类型和一个处理函数组成，接受state作为第一个参数
    // 触发mutations使用commit
    INCREASE_NUM(state){
      state.num++
    },
    DECREASE_NUM(state,payload){//payload是调用的时候主动传递的
      console.log(payload);
      state.num=state.num-payload
    },
    SET_PRODUCTS(state,payload){
        console.log(payload);
        state.products=payload
    }
  },
  actions: {//发送异步请求
    // 由一个类型和一个处理函数组成，
    // 接受context作为第一个参数，context上下文就是Vuex实例
    // 触发actiions使用dispatch
    GET_PRODUCTS(context,payload){
        console.log(context);
        console.log("payload",payload);
        // 发起异步请求
        fetch('http://chst.vip/data/index.json')
        .then(body=>body.json())
        .then(res=>{
          console.log(res);
          context.commit('SET_PRODUCTS',res.data)
          // context.state.msg='挑战严格模式'
        })
    }
  },
  modules: {//模块化

  },
});
